import { Avatar, Dropdown, Menu, Modal, message } from "antd";
import avatar from '@/assets/react.svg'
import type { MenuProps } from 'antd';
import { connect } from "react-redux";
import { setToken } from "@/redux/modules/global/action";
import { useNavigate } from "react-router-dom";

function AvatarIcon(props: any) {
    const {setToken }  = props;
    const navigate = useNavigate()
    // logout
    const logout = () => {
        Modal.confirm({
            title: '提示',
            content: '是否退出登录',
            onOk() {
                setToken('')
                message.success('退出成功')
                navigate('/login')
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    // dropdown menu
    const items: MenuProps['items'] = [
        {
            key: '1',
            label: <span className="dropdown-item">首页</span>,
            onClick: () => window.location.href = import.meta.env.VITE_HOME_URL
        },
        {
            key: '2',
            label: <span className="dropdown-item">退出登录</span>,
            onClick: () => logout
        }
    ]
    return ( 
        <>
            <Dropdown menu={{items}} placement="bottom" arrow trigger={['click']}>
                <Avatar size="small" src={avatar} />
            </Dropdown>
        </>
     );
}

// export default AvatarIcon;
const mapDispatchToProps = { setToken }
export default connect(null, mapDispatchToProps)(AvatarIcon)